<template>
  <div class="file-upload">
    <div class="crumbs">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{path:'/'}">系统首页</el-breadcrumb-item>
        <el-breadcrumb-item>文件上传</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div>拖拽上传</div>
      <el-upload drag multiple :file-list="fileList" :auto-upload="false" :accept="accept" :action="action"
                 style="width: 50%"
                 :on-preview="onPreview"
                 :on-remove="onRemove"
                 :on-success="onSuccess"
                 :on-error="onError"
                 :on-progress="onProgress"
                 :on-change="onChange"
                 :before-upload="beforeUpload"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖拽到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>

      <div style="margin-top: 10px">照片墙</div>
      <el-upload multiple list-type="picture-card"
                 :file-list="fileList"
                 :auto-upload="false"
                 :accept="accept" :action="action" style="width: 50%"
                 :on-preview="onPreview"
                 :on-remove="onRemove"
                 :on-success="onSuccess"
                 :on-error="onError"
                 :on-progress="onProgress"
                 :on-change="onChange"
                 :before-upload="beforeUpload"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialog.visible">
        <img width="100%" :src="dialog.imageUrl" alt="">
      </el-dialog>

      <div style="margin-top: 10px">缩略图</div>
      <el-upload multiple list-type="picture"
                 :file-list="fileList"
                 :auto-upload="false"
                 :accept="accept" :action="action" style="width: 50%"
                 :on-preview="onPreview"
                 :on-remove="onRemove"
                 :on-success="onSuccess"
                 :on-error="onError"
                 :on-progress="onProgress"
                 :on-change="onChange"
                 :before-upload="beforeUpload"
      >
        <el-button type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </div>
  </div>
</template>

<script>
  export default {
    name: "FileUpload",
    data() {
      return {
        action: '',
        accept: 'image/jpg,image/png',
        fileList: [],
        dialog: {
          visible: false,
          imageUrl: ''
        }
      }
    },
    methods: {
      onPreview(file) {
        this.dialog.imageUrl = file.url;
        this.dialog.visible = true;
      },
      onRemove(file, fileList) {
        this.$message.warning('文件移除 ==> ' + file.name)
      },
      onSuccess(file, fileList) {
        this.$message.success('文件上传成功 ==> ' + file.name)
      },
      onError(err, file, fileList) {
        this.$message.error('文件上传失败 ==> ' + file.name)
      },
      onProgress(event, file, fileList) {
        this.$message.info('文件上传中....' + file.name)
      },
      onChange(file, fileList) {
        // this.$message.warning('文件类型不支持 ===> ' + file.raw.type);
        // this._.remove(fileList, file);
      },
      beforeUpload(file) {
        this.$message.warning('文件类型不支持 ===> ' + file.raw.type);
        return false;
      }
    }
  }
</script>

<style scoped>
  .file-upload >>> .el-upload-dragger {
    width: 100%;
  }

  .file-upload >>> .el-upload--text {
    width: 100%;
  }
</style>
